<template>
   <el-dialog title="日志" :visible.sync="log_form.logAble" style="width:1500px;margin:auto">
      <el-timeline :reverse="false" style="margin-top:20px">
        <el-timeline-item
          v-for="(item, index) in loglist"
          :key="index"
          :timestamp="item.create_time"
        >

          <div style="color:#666;font-size:14px">
            <div class="collectcss">操作人员：<span>{{ item.admin_name }}</span></div>
            <div class="collectcss">状态：<span>{{ item.status_name }}</span></div>
            <div class="collectcss">备注：<span>{{ item.desc }}</span></div>

            <div class="collectcss" v-if="item.data">详情:</div>
            <el-card class="box-card" v-if="item.data" style="margin-top: 5px;">
              <el-row>
                <div v-for="(v,k) in item.data" style="height: auto;">
                    <el-col :span="12" style="margin-bottom: 10px;color: #999;" v-if="k!='expense'&&k!='contract'">{{ v.key }}：{{ v.value }}</el-col>
                </div>
              </el-row>
              <div  style="margin-top: 20px;" v-if="item.data.expense">报销信息</div>
              <div class="box-card" style="margin-top: 10px;color: #999;"  v-if="item.data.expense" v-for="(a,b) in item.data.expense" :key="k">
                  <el-row >
                    <el-col :span="8">报销类型：{{ a.expense_name }}</el-col>
                    <el-col :span="8">报销金额：{{ a.money }}</el-col>
                    <el-col :span="8">费用组成：{{ a.money_combi }}</el-col>
                  </el-row> 
                <el-row >
                  <el-col :span="24">
                    <div ref="viewer" v-viewer="viewerOptions" class="">
                      <div v-for="(img,index1) in a.images" :key="index1" class="grid-content bg-purple-light img_box">
                        <img :src="img.path" height="100%" width="100%">
                      </div>
                    </div>
                  </el-col>
                </el-row> 
              </div>
              <div  style="margin-top: 20px;" v-if="item.data.contract">协议相关</div>
              <div class="box-card" style="color: #999;"   >
                <el-row >
                  <el-col :span="24">
                    <div ref="viewer" v-viewer="viewerOptions" class="">
                      <div v-if="item.data.contract" v-for="(a,b) in item.data.contract"  class="grid-content bg-purple-light img_box">
                        <img :src="a.path" height="100%" width="100%">
                      </div>
                    </div>
                  </el-col>
                </el-row> 
              </div>
              
            </el-card>
           
            <!-- <div class="collectcss">
              <div style="float:left">时间：</div>
              <span style="width:80%;outline:none">
                <span v-html="item.desc" />
              </span>
            </div> -->

          </div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
</template>

<script>
import { getAllExpenseLogList } from '@/api/manager.js'
import waves from '@/directive/waves' // waves directive
export default {
  
  props: ['log_form'],
  directives: {
    waves
  },
  data() {
    return {
      reverse:'true',
      loading: false,
      loglist:[],
    }
  },
  created(){
    this.getAllExpenseLogList()
  },
  methods: {
    getAllExpenseLogList() {
      getAllExpenseLogList(this.log_form).then(response => {
        this.loglist = response.data
      })
    },
  }
}
</script>

<style scoped>
.collectcss{margin-top:7px;color:#999;font-size:14px}
.details{
  margin-top:7px;color:#999;font-size:14px

}
.drop{
  border: 2px dashed #bbb;
  width: 600px;
  height: 160px;
  line-height: 160px;
  margin: 0 auto;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
}
</style>
